<!-- 选项设置->公共组建 -->
<template>
  <a-row style="height:100%;position:relative;">
    <a-col span="24" style="height: calc(100% - 50px);overflow-y:auto;">
      <!---基础数据--->
      <a-col span="24">
        <card-wrapper :title="'基础数据'">
          <template v-slot:slot-1>

            <a-row v-for="(item, index) in data" :key="index">
              <a-col v-if="item.parentName=='基础数据' && item.code!='PartnerRepeatControlMode' && item.code!='PartnerRepeatCheck'" :span="24" @mouseenter="hover(item)" class="back">
                <a-checkbox class="padding-5" v-show="item.isVisible==1" :disabled="item.isEnable==0" :checked="item.value==1" @change="value => handleChange(value,item.code)">{{ item.name }}</a-checkbox>
              </a-col>
            </a-row>

            <!-- 往来单位重复控制方式 -->
            <a-row v-for="(item, index) in data" :key="index">
              <a-col v-if="item.code=='PartnerRepeatControlMode'" v-show="item.isVisible==1" :span="24" @mouseenter="hover(item)" class="back">
                <a-col class="padding-5" :span="24">
                  <span class="line-h35">{{item.name}}:</span>
                  <a-radio-group class="text-after-radio padding-left-8" :disabled="item.isEnable == 0" :value="Number(item.value)" @change="value => handleRadioChange(value,item.code)">
                    <a-radio :value="1">
                      保存
                    </a-radio>
                    <a-radio :value="2">
                      审核
                    </a-radio>
                  </a-radio-group>
                </a-col>
              </a-col>
            </a-row>

            <!-- 往来单位重复检查项 -->
            <a-row v-for="(item, index) in data" :key="index">
              <a-col v-if="item.code=='PartnerRepeatCheck'" v-show="item.isVisible==1" :span="24" @mouseenter="hover(item)" class="back">
                <a-col class="padding-5" :span="24">
                  <span class="line-h35">{{item.name}}:</span>
                  <a-checkbox-group class="text-after-radio padding-left-8" :options="partnerOptions" :disabled="item.isEnable == 0" v-model="item.value" @change="value => handleCheckboxChange(value,item.code)"></a-checkbox-group>
                </a-col>
              </a-col>
            </a-row>

          </template>
        </card-wrapper>
      </a-col>
      <!-- 数据精度 -->
      <a-col span="24">
        <card-wrapper :title="'数据精度'">
          <template v-slot:slot-1>
            <a-row v-for="(item, index) in data" :key="index">
              <a-col v-if="item.parentName == '数据精度'" :span="24" @mouseenter="hover(item)" class="back">
                <a-row>
                  <a-col :span="5" class="text-after-title">{{item.name}}</a-col>
                  <a-col :span="2" class="text-after-input">
                    <a-input :value="item.value" size="small" @change="value => handleInputChange(value,item.code)"></a-input>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </template>
        </card-wrapper>
      </a-col>

      <!-- 条形码管理 -->
      <a-col span="24">
        <card-wrapper :title="'条形码管理'">
          <template v-slot:slot-1>
            <a-row v-for="(item, index) in data" :key="index">
              <a-col v-if="item.parentName == '条形码管理'" :span="24" @mouseenter="hover(item)" class="back">
                <a-checkbox v-if="item.code == 'BarCodeManage'" class="padding-5" v-show="item.isVisible==1" :disabled="item.isEnable==0" :checked="item.value==1" @change="value => handleChange(value,item.code)">{{ item.name }}</a-checkbox>
              </a-col>
            </a-row>
            <a-row v-for="(item, index) in data" :key="index">
              <div class="">
                <a-col class="padding-left-20 back" v-if="item.parentName == '条形码管理' && item.code !='BarCodeManage'" @mouseenter="hover(item)">
                  <a-checkbox v-if="item.code !='BarCodeIdNumber'" class="padding-5" v-show="item.isVisible==1" :disabled="item.isEnable==0" :checked="item.value==1" @change="value => handleChange(value,item.code)">{{ item.name }}</a-checkbox>

                  <a-row v-if="item.code =='BarCodeIdNumber'">
                    <a-col :span="5" class="text-after-title">{{item.name}}</a-col>
                    <a-col :span="2" class="text-after-input">
                      <a-input :value="item.value" size="small" @change="value => handleInputChange(value,item.code)"></a-input>
                    </a-col>
                  </a-row>
                </a-col>
              </div>
            </a-row>

          </template>
        </card-wrapper>
      </a-col>
      <!-- 序列号管理 -->
      <a-col span="24">
        <card-wrapper :title="'序列号管理'">
          <template v-slot:slot-1>
            <a-row v-for="(item, index) in data" :key="index">
              <a-col v-if="item.parentName == '序列号管理'" :span="24" @mouseenter="hover(item)" class="back">
                <a-checkbox class="padding-5" v-show="item.isVisible==1" :disabled="item.isEnable==0" :checked="item.value==1" @change="value => handleChange(value,item.code)">{{ item.name }}</a-checkbox>
              </a-col>
            </a-row>
          </template>
        </card-wrapper>
      </a-col>
      <!-- 批号及效期管理 -->
      <a-col span="24">
        <card-wrapper :title="'批号及效期管理'">
          <template v-slot:slot-1>
            <a-row v-for="(item, index) in data" :key="index">
              <a-col v-if="item.code == 'IsBatchNumberManage'" :span="24" @mouseenter="hover(item)" class="back">
                <a-checkbox class="padding-5" v-show="item.isVisible==1" :disabled="item.isEnable==0" :checked="item.value==1" @change="value => handleChange(value,item.code)">{{ item.name }}</a-checkbox>
              </a-col>
            </a-row>
            <a-row v-for="(item, index1) in data" :key="index1">
              <a-col class="padding-left-20 back" :span="24" @mouseenter="hover(item)" v-if="item.parentName == '批号及效期管理' && item.code != 'IsBatchNumberManage'">
                <a-checkbox class="padding-5" v-if="item.code !='isQualityPeriodConfirm'" v-show="item.isVisible==1" :disabled="item.isEnable==0" :checked="item.value==1" @change="value => handleChange(value,item.code)">{{ item.name }}</a-checkbox>
                <!-- 失效批次控制 -->
                <a-row class="padding-left-23" v-if="item.code =='isQualityPeriodConfirm'">
                  <a-col :span="4" class="text-after-radio">{{item.name}}</a-col>
                  <a-col :span="8">
                    <a-radio-group :value="Number(item.value)" @change="value => handleRadioChange(value,item.code)">
                      <a-radio :value="1">
                        控制
                      </a-radio>
                      <a-radio :value="0">
                        提示
                      </a-radio>
                    </a-radio-group>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </template>
        </card-wrapper>
      </a-col>
      <!-- 其他 -->
      <a-col span="24">
        <card-wrapper :title="'其他'">
          <template v-slot:slot-1>
            <a-row v-for="(item, index) in data" :key="index">
              <a-col v-if="item.parentName == '其他' &&item.code !='IsApprovalProcess' && item.code !='UnauditOptionOne' && item.code !='UnauditOptionTwo' && item.code != 'UnauditOption'" :span="24" @mouseenter="hover(item)" class="back">
                <a-checkbox class="padding-5" v-show="item.isVisible==1" :disabled="item.isEnable==0" :checked="item.value==1" @change="value => handleChange(value,item.code)">{{ item.name }}</a-checkbox>
              </a-col>
            </a-row>
            <a-row v-for="(item, index) in data" :key="index">
              <!--审批流-->
              <a-col v-if="item.code =='IsApprovalProcess'" @mouseenter="hover(item)">
                <a-checkbox class="padding-5" v-show="item.isVisible==1" :disabled="item.isEnable==0" :checked="item.value==1" @change="value => handleChange(value,item.code)">{{ item.name }}</a-checkbox>
              </a-col>
              <!-- 弃审选项(写死的) UnauditOption、UnauditOptionOne、UnauditOptionTwo -->
              <a-row class="padding-left-28" v-if="item.code == 'UnauditOption'" @mouseenter="hover(item)">
                <a-col :span="3">{{item.name}}</a-col>
                <a-col :span="21">
                  <a-radio-group :value="Number(item.value)" @change="value => handleRadioChange(value,item.code)">
                    <a-radio :value="1">
                      弃审后保存单据才能审批
                    </a-radio>
                    <a-radio :value="0">
                      弃审自动生成审批流
                    </a-radio>
                  </a-radio-group>
                </a-col>
              </a-row>
            </a-row>
          </template>
        </card-wrapper>
      </a-col>
    </a-col>
    <div class="btn-save">
      <div class="box">
        <a-button type="primary" @click="submit">保存</a-button>
      </div>
    </div>
  </a-row>
</template>
<script>
import { cardWrapper } from "@/components/CardWrapper"; // 分类外框
import { list, save } from "@/api/erp/accountRuleSet"; //选项设置接口

export default {
  props: {},
  data() {
    return {
      accountSetType: ["UA", "ST", "FI", "ARAP", "SA", "PU"],
      partnerOptions: [
        // 往来单位重复检查项
        { label: "名称", value: "1" },
        { label: "简称", value: "2" },
        { label: "手机号", value: "3" },
        { label: "电话", value: "4" },
      ],
      data: {}, // 数据

      showBarCode: false, //条形码下面展示
      showProcess: false, //审批流
    };
  },
  components: {
    cardWrapper,
  },
  created() {},
  methods: {
    hover(item) {
      this.$emit("description", item);
    },
    handleChange(event, code) {
      //多选框点击事件
      console.log(event);

      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].code == code) {
          // event.target.checked? (this.data[i].value = "1") : (this.data[i].value = "0");
          if (event.target.checked) {
            // this.$set(this.data[i], "isEnable", "1"); //启用
            this.$set(this.data[i], "value", "1"); //开启
          } else {
            // this.$set(this.data[i], "isEnable", "0"); //禁用
            this.$set(this.data[i], "value", "0"); //关闭
          }
        }
      }
    },
    handleInputChange(event, code) {
      //输入框事件
      console.log(event);
      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].code == code) {
          this.data[i].value = event.data;
        }
      }
      console.log(this.data);
    },
    handleRadioChange(event, code) {
      //单选框事件
      console.log(event);
      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].code == code) {
          this.data[i].value = event.target.value;
        }
      }
      console.log(this.data);
    },
    handleCheckboxChange(event, code) {
      //多选框事件组
      // console.log(event.split(','));
      console.log({ ...event });
      console.log(event);
      console.log(event.map((o) => o).join(","));
      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].code == code) {
          this.data[i].value = event.map((o) => o).join(",");
        }
      }
    },
    submit() {
      //提交数据
      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].code === "PartnerRepeatCheck") {
          if (this.data[i].value.length < 1) {
            this.$message.error("往来单位重复检查项,至少选择一个", 3);
            return;
          }
        }
      }
      save(this.data)
        .then((response) => {
          if (response.code == 200) {
            this.$message.success("保存成功");
          }
        })
        .catch((error) => {});
    },
    getData(type) {
      list({ moduleCode: type })
        .then((response) => {
          if (response.code == 200) {
            this.data = response.data;
          }
        })
        .catch((error) => {});
    },
  },
};
</script>
<style lang="less" scoped>
.back:hover {
  background: #eee;
}

.padding-5 {
  padding: 5px;
  display: block;
}
.padding-4 {
  padding: 4px 0;
}

.btn-save {
  width: 100%;
  height: 50px;
  line-height: 50px;
  box-shadow: 0 0 10px #ddd;
  text-align: center;
  position: absolute;
  bottom: 0;
  .btn {
    margin-right: 10px;
  }
}

.text-after-input {
  padding: 4px 0;
}
.text-after-title {
  line-height: 35px;
  padding-left: 5px;
}
.text-after-radio {
  line-height: 28px;
  padding-left: 5px;
}
</style>